<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>高阶函数_函数柯里化</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>


    <!-- 函数的柯里化：
        通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。  -->
	<script type="text/babel">
		// 创建组件
        class Login extends React.Component{
            // 初始化状态
            state={
                username:"",//用户名
                password:""//密码
            }
            //保存表单数据到状态中
            saveFormData=(dataType)=>{
                return (event)=>{
                    this.setState({[dataType]:event.target.value})
                }
            }
            // 表单提交回调
            handleSubmit=(event)=>{
                event.preventDefault()//阻止表单提交
                const {username,password}=this.state
                alert(`你输入的用户名是：${username},你输入的密码是：${password}`)
            }
            render(){
                return (
                    <form action="" onSubmit={this.handleSubmit}>
                        用户名：<input type="text" name="username" onChange={this.saveFormData("username")}/>
                        用户名：<input type="password" name="password" onChange={this.saveFormData("password")}/>
                        <button>登录</button>
                    </form>
                )
            }
            
        }
        // 渲染组件
        ReactDOM.render(<Login/>,document.getElementById("test"))
	</script>
</body>
</html>